<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import type { Ref } from 'vue'
interface iLive {
  hn: number
  nickname: string
  online: number
  owner_uid: string
  room_id: number
  room_name: string
  room_src: string
  url: string
}

const liveList: Ref<iLive[]> = ref([])

onMounted(() => {
  // 直接请求的时候会遇到跨域问题，可以配置一个代理解决
  // http://open.douyucdn.cn/api/RoomApi/live
  axios.get('/api/RoomApi/live').then(res => {
    console.log(res);
    liveList.value = res.data.data
  })
})
</script>
<template>
  <div class="box">
    <header class="header"> 我的 </header>
    <div class="content">
      <p v-for="item in liveList" :key="item.owner_uid">{{ item.room_name }}</p>
    </div>
  </div>
</template>
